<!DOCTYPE html>
<html>

<head>
    <title>Custom Frame Rate Animation</title>
</head>

<body>
    <canvas width="1000" height="600"></canvas>
    <script>
        const canvasElem = document.querySelector('canvas')

        // 设置帧率
        const fps = 24

        const ctx = canvasElem.getContext('2d')


        const rectSize = 100



        video = document.createElement('Video');
        video.src = './src/528d9376-f0fd-4445-9840-13e7559d6056.webm';
        video.controls = true;

        // document.body.append(video)


        function draw() {
            ctx.clearRect(0, 0, canvasElem.width, canvasElem.height);

            // 画方形
            ctx.save();


            ctx.fillStyle = '#eee'
            ctx.fillRect(0, 0, 1000, 600)

            // ctx.translate(200, 200)
            // const time = new Date();
            // ctx.rotate(
            //     (
            //         ((2 * Math.PI) / 60) * time.getSeconds() +
            //         ((2 * Math.PI) / 60000) * time.getMilliseconds()
            //     ) * 24,
            // );
            // ctx.fillStyle = '#ddd'
            // ctx.fillRect(rectSize / -2, rectSize / -2, rectSize, rectSize)


            ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight)  //绘制视频
            // ctx.restore();
        }


        // window.requestAnimationFrame(draw);

        setInterval(() => {
            draw()
        }, 1000 / fps)
    </script>
</body>

</html>